<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid red;"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("canvas")
			var cxt = canvas.getContext("2d")
			var img = new Image();
			canvas.width = 400;
			canvas.height = 300;
			
			cxt.beginPath()
			cxt.arc(70, 70, 50, 0, 2*Math.PI, true)
			cxt.closePath()
			cxt.stroke()
			
			cxt.clip()
			
			var image = new Image()
			image.src = "img/princess.png"
			image.onload = function() {
				cxt.drawImage(image, 10, 30)
			}
		</script>
	</body>
</html>
